<!-- 企业挂账/挂账管理页面 =====> 企业账户子账户 -->
<template>
  <div>
    <div class="content-box">
      <div class="left-box">
        <div class="title-box">企业账户子账户</div>
        <div class="table-list-box">
          <el-table v-loading="loading" element-loading-text="加载中..."  :data="tableData" border>
            <el-table-column align="center" prop="id" label="子账户ID" />
            <el-table-column align="center" prop="name" label="姓名" />
            <el-table-column align="center" prop="mobile" label="联系电话" />
            <el-table-column align="center" prop="money_limit" label="信用额度" />
            <el-table-column align="center" prop="create_time" label="创建时间" />
          </el-table>
        </div>
        <div class="desc-btn-box">
          <div class="desc">
            <pagination v-show="pageListTotal > 0" :total="pageListTotal" v-model:page="pageListQuery.page" v-model:limit="pageListQuery.limit" @pagination="getCreditPageList" :pageSizes="[15, 45, 75, 100]" />
          </div>
          <div class="btn-box">
            <div class="btn-item" @click="handleBack">返回</div>
          </div>
        </div>
      </div>
    </div>
    <custom-dialog v-model:visible="isShowDialog">
      <div class="dialog-content">
        <div class="title">{{ orgChildrenId ? '编辑子账户' : '新增子账户' }}</div>
        <div class="form-box">
          <div class="form-item">
            <div class="label"><span>*</span><div>姓名</div></div>
            <el-input class="input" v-model="subAccountForm.name" placeholder="请输入姓名" clearable />
          </div>
          <div class="form-item">
            <div class="label"><span>*</span><div>联系电话</div></div>
            <el-input class="input" v-model="subAccountForm.phone" placeholder="请输入手机号码" clearable />
          </div>
          <div class="form-item">
            <div class="label"><span>*</span><div>信用额度</div></div>
            <el-input class="input" v-model="subAccountForm.money" placeholder="请输入信用额度" clearable />
          </div>
        </div>
      </div>
      <div class="dinerDialog-bottom-btn">
        <div class="cancel-btn" @click="onCancel">取消</div>
        <div class="confirm-btn" @click="onConfirm">确定</div>
      </div>
    </custom-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { dealAssignDataFunction, formTestFun, checkPhoneNumber, moneyRegFunction } from '@/utils/toolsValidate'
import { creditSubAccountList } from '@/api/pay'
import { creditAddAccount, creditEditAccount } from '@/api/statistics'
import { useRoute, useRouter } from 'vue-router'
import CustomDialog from '@/components/CustomDialog/Index.vue'

const route = useRoute()
const router = useRouter()

const datetimerangeList = ref([])
const searchKeyword = ref(null)
const subAccountForm = reactive({ name: null, phone: null, money: '' })
const isShowDialog = ref(false)
const tableData = ref([])
const pageListQuery = reactive({ org_id: '', page: 1, limit: 15 })
const pageListTotal = ref(0)

const loading = ref(false)
const orgParentId = ref('')
const orgChildrenId = ref('')
const buttonDisabled = ref(false)

onMounted(() => { pageListQuery.org_id = route.query.org_id; getCreditPageList() })

function handleEdit(row) {
  orgChildrenId.value = row.id
  subAccountForm.name = row.name
  subAccountForm.phone = row.mobile
  subAccountForm.money = row.money_limit
  isShowDialog.value = true
}

function handleBack() { router.back() }
function handleOpenDialog() { subAccountForm.name = null; subAccountForm.phone = null; isShowDialog.value = true }
function onCancel() { isShowDialog.value = false }

function onConfirm() {
  const testForm = { 请输入姓名: subAccountForm.name, 请输入手机号码: subAccountForm.phone, 请输入正确的手机号码: checkPhoneNumber(subAccountForm.phone), 请输入信用额度: subAccountForm.money, 信用额度只能为数字: moneyRegFunction(subAccountForm.money) }
  if (formTestFun(testForm)) return
  if (buttonDisabled.value) return
  buttonDisabled.value = true
  if (orgChildrenId.value) {
    const datas = { id: orgChildrenId.value, name: subAccountForm.name, mobile: subAccountForm.phone, money_limit: subAccountForm.money }
    creditEditAccount(datas).then(res => { buttonDisabled.value = false; if (res.status === 200) { ElMessage.success('修改成功'); onCancel(); pageListQuery.page = 1; getCreditPageList() } }).catch(() => { buttonDisabled.value = false })
    return
  }
  const datas = { org_id: pageListQuery.org_id, name: subAccountForm.name, mobile: subAccountForm.phone, money_limit: subAccountForm.money }
  creditAddAccount(datas).then(res => { buttonDisabled.value = false; if (res.status === 200) { ElMessage.success('新增成功'); onCancel(); pageListQuery.page = 1; getCreditPageList() } }).catch(() => { buttonDisabled.value = false })
}

function getCreditPageList() {
  loading.value = true
  creditSubAccountList(pageListQuery).then(res => {
    if (res.status === 200) {
      tableData.value = dealAssignDataFunction([], res?.data?.list?.data)
      pageListTotal.value = dealAssignDataFunction(0, res?.data?.list?.total)
      loading.value = false
    }
  }).catch(() => { loading.value = false })
}
</script>

<style lang="scss" scoped>
::v-deep { .el-table { border-radius: 12px; } .el-table__body-wrapper { height: 710px; overflow-y: auto; } .el-table__body-wrapper::-webkit-scrollbar { width: 6px !important; height: 0 !important; } .el-table__body-wrapper::-webkit-scrollbar-thumb { height: 200px !important; background: #d2d2d2 !important; border-radius: 3px !important; } .el-table__body-wrapper::-webkit-scrollbar-track { display: none !important; } .el-table th.el-table__cell { background: #a85b62; color: #fff !important; } .el-input__inner { border-radius: 12px; } }
.content-box { display: flex; align-items: flex-start; }
.content-box .left-box { width: 1600px; height: 986px; background: #ffffff; border-radius: 20px; box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16); box-sizing: border-box; }
.content-box .left-box .title-box { display: flex; align-items: center; justify-content: center; height: 88px; background: #f4f4f4; border-radius: 20px 20px 0px 0px; font-size: 20px; font-family: PingFang SC, PingFang SC-Bold; font-weight: 700; text-align: center; color: #333333; }
.content-box .left-box .table-list-box { padding: 30px 50px 0 50px; }
.content-box .left-box .desc-btn-box { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; padding-left: 50px; box-sizing: border-box; }
.content-box .left-box .desc-btn-box .desc { font-size: 14px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: left; color: #333333; }
.content-box .left-box .desc-btn-box .btn-box { display: flex; align-items: center; }
.content-box .left-box .desc-btn-box .btn-box .btn-item { display: inline-block; padding: 0 42px; height: 52px; line-height: 52px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: center; color: #333333; margin-right: 40px; cursor: pointer; }
.content-box .left-box .desc-btn-box .btn-box .btn-item:hover { color: #7c0a03; border-color: #7c0a03; }
::v-deep { .el-input__inner { border-radius: 12px; } }
.dialog-content .title { font-size: 20px; font-family: PingFang SC, PingFang SC-Bold; font-weight: 700; text-align: left; color: #000000; margin-bottom: 10px; }
.dialog-content .form-box { display: flex; align-items: center; flex-wrap: wrap; }
.dialog-content .form-box .form-item { display: flex; align-items: center; margin-top: 20px; margin-right: 50px; }
.dialog-content .form-box .form-item .label { min-width: 80px; display: flex; align-items: flex-start; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: left; color: #000; margin-right: 10px; }
.dialog-content .form-box .form-item .label > span { color: #7c0a03; }
.dialog-content .form-box .form-item .input, .dialog-content .form-box .form-item .select { width: 300px; border-radius: 12px; }
.dinerDialog-bottom-btn { margin-top: 100px; display: flex; align-items: center; justify-content: flex-end; height: 52px; }
.dinerDialog-bottom-btn .cancel-btn { width: 134px; height: 52px; line-height: 52px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: center; color: #333333; cursor: pointer; }
.dinerDialog-bottom-btn .confirm-btn { width: 132px; height: 52px; background: #7c0a03; line-height: 52px; border-radius: 12px; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: center; color: #ffffff; margin-left: 40px; cursor: pointer; }
</style>
